<template>
  <div class="app-container">

    <div class="filter-container">
      <div class="filter-item">
        <el-input v-model="query.keyword" placeholder="关键词" prefix-icon="el-icon-search"/>
      </div>
      <div class="filter-item">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
    </div>

    <!-- 分页列表-->
    <el-table :data="list.data" v-loading="list.loading" highlight-current-row>
      <el-table-column label="ID" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="简称" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.shortname }}</span>
        </template>
      </el-table-column>

      <el-table-column label="经度" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.lng }}</span>
        </template>
      </el-table-column>

      <el-table-column label="伟度" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.lat }}</span>
        </template>
      </el-table-column>

      <el-table-column label="级别" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.level }}</span>
        </template>
      </el-table-column>

      <el-table-column label="排序" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.sort }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!list.loading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="query.page" :page-size="query.limit" :page-sizes="[10,20,50,100]"
                     layout="total, sizes, prev, pager, next, jumper" :total="list.total">
      </el-pagination>
    </div>

    <!-- 编辑-->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="form" :model="temp" label-position="right" label-width="70px">

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="ID" prop="date">
              <el-input v-model="temp.id" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="名称" prop="name">
              <el-input v-model="temp.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="简称" prop="name">
              <el-input v-model="temp.shortname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="简称" prop="shortname">
              <el-input v-model="temp.shortname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update('form')">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {loadList} from "@/api/area";

  export default {
    name: "area",
    data() {
      return {
        // 分页查询参数
        query: {
          pageNo: 1,
          pageSize: 10,
          orderByField: undefined,
          isAsc: undefined,
          keyword: undefined
        },
        list: {
          loading: false,
          total: 100,
          data: []
        },
        temp: {},
        dialogFormVisible: false,
        rules: {
          name: [{required: true, message: '姓名不能为空', trigger: 'change'}]
        }
      }
    },
    created() {

    },
    mounted() {
      this.loadPage();
    },
    computed: {},
    props: [],
    methods: {
      loadPage() {
        this.list.loading = true;
        loadList(this.query).then(response => {
          if (response.code == 200) {
            this.list.data = response.data.records;
            this.list.total = response.data.total;
          }
        })
        this.list.loading = false;
      },
      handleSizeChange(val) {
        this.query.pageSize = val;
        this.query.pageNo = 1;
        this.loadPage();
      },
      handleCurrentChange(val) {
        this.query.pageNo = val;
        this.loadPage();
      },
      search() {
        this.loadPage();
      },
      handleUpdate(row) {
        this.temp = row;
        // Object.assign(this.temp, row)
        console.log(this.temp)
        this.dialogFormVisible = true
      },
      update(fromName) {
        this.$refs[fromName].validate((valid) => {
          if (valid) {
            const tempData = Object.assign({}, this.temp)
            for (const v of this.list) {
              if (v.id === tempData.id) {
                console.log(v.id, tempData.id, v, tempData)
                const index = this.list.indexOf(v)
                this.list.splice(index, 1, tempData)
                break
              }
            }
            this.dialogFormVisible = false
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
            })
          }
        })
      },
      handleDelete(row) {
        this.$confirm("此操作将永久删除, 是否继续", "提示", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
          })
        })
      }
    }
  };
</script>
<style>

</style>
